<template>
		<view class="content">
			<!-- 热门, 全部 -->
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: curTab === 1 ? (0 === index ? true :false):(1 === index ? true :false)}"
				 @click="tabClick(index)">
					{{item.text}}
				</view>
			</view>
			<view class="listcon">
				<empty v-if="refreshing == false &&  hotQas.length === 0"></empty>
				<!-- 下拉刷新组件 -->
				<scroll-view class="panel-scroll-box" 
					style="height: 100%;"
					:scroll-y="enableScroll" 
					refresher-enabled="true"
					:refresher-triggered="triggered"
					@refresherrefresh="pulldownReresh"
					@scrolltolower="loadMore">
										
					<view class="hot-wrapper">
						<uni-list>        
							<uni-list-item @click="navDetail(item)" v-for="(item,index) in hotQas" :title="item.title" :show-extra-icon="true" :extra-icon="{color: '#909399',size: '22',type: 'help-filled'}"></uni-list-item>
						</uni-list>
					</view>
									
					<!-- 上滑加载更多组件 -->
					<mix-load-more v-show="loadMoreStatus>-1" :status="loadMoreStatus"></mix-load-more>
				</scroll-view>
			</view>
		</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import empty from "@/components/empty";
	export default {
		data() {
			return {
			
				navList: [{
						key:0,
						state: '1',
						text: '热门'
					},{
						key:1,
						state: '1',
						text: '全部'
					}],
				hotQas:[],	//热门问题
				qas:[],	//分类问题
				tags:[]	,//分类标签
				curPage:1,
				total:0,
				pageSize:10,
				curTab:1,   //1-热门，0-全部
				enableScroll: true,
				
				triggered:false,
				refreshing:false,
				loadMoreStatus:1,   //0-可上拉显示更多，1-加载中；2-没有更多可加载
				
			}
		},
		components: {
			uniList,
			uniListItem,
			uniTag,
			mixPulldownRefresh,
			mixLoadMore,
			empty
		},
		onLoad(option) {
			this.queryQaList(this.curPage,null,this.curTab);
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'applicationConfig'])
		},
		
		//原生下拉事件
		onPullDownRefresh(e) {
			console.log('----onPullDownRefresh---e-----',e);
		},
		
		methods: {
			
			//下拉刷新
			pulldownReresh() {
				if(this.refreshing){
					return
				}
				
				this.refreshing = true;
				if(!this.triggered){
					this.triggered = true;
				}
				this.curPage = 1;
				this.hotQas = [];
				this.total = 0;
				this.loadMoreStatus = -1;
				this.queryQaList(this.curPage,"refresh",this.curTab);
			},
			
			//上滑加载
			loadMore() {
				if(this.hotQas.length>=this.total){
					return;
				}
				this.queryQaList(this.curPage + 1,"add",this.curTab);
			},
			
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			
			
			tabClick(index) {
				if(this.curTab == index){   //点击的tab和当前的tab不一样
					if(index == 0){   //热门
					    this.curTab = 1;
						this.curPage = 1;
						this.hotQas = [];
						this.total = 0;
						this.loadMoreStatus = 1;
						this.refreshing = true;
						this.queryQaList(this.curPage,null,this.curTab);
					}
					else if(index == 1){   //全部
						this.curTab = 0;
						this.curPage = 1;
						this.hotQas = [];
						this.total = 0;
						this.loadMoreStatus = 1;
						this.refreshing = true;
						this.queryQaList(this.curPage,null,this.curTab);
					}
				}
			},
			
			//查询问题列表
			queryQaList(page,operation=null,curTab){
				
				if(operation === 'add'){
					if(this.loadMoreStatus === 2){    //没有更多了
						return;
					}
					this.loadMoreStatus === 1;
				}
				else if(operation === 'refresh'){
					this.refreshing = true;
				}
				let _this = this;
				let areaId = this.$api.util.getAreaCode();
				this.$api.request.queryQaList({page:page,pageSize:this.pageSize,type:curTab,communityId:areaId},function(res){
					_this.triggered = false;
					_this.refreshing  = false;
					if(res.body){
						if(res.body && res.body.status.statusCode === '0'){
							
							if(operation==='refresh'){
								_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
								_this.refreshing = false;
								_this.loadMoreStatus = 0;
							}
							_this.loadMoreStatus = _this.hotQas.length >= _this.total ? 2 : 0;
							
							console.log('-----this.curTab----------',_this.curTab)
							console.log('-----curTab----------',curTab)
							if(_this.curTab != curTab){
								return
							}
							_this.total = res.body.data.total;
							_this.curPage = res.body.data.page;
							_this.hotQas = _this.hotQas.concat(res.body.data.lists)
							
						}
					}
					else{
						_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						_this.refreshing = false;
						_this.loadMoreStatus = 2;
					}
					
				
				},true);
			},
			
			//查询热门问题
			inquiryHotQa() {
				let that = this;
				this.$api.request.hotQaList({}, function(res) {
					if (res.body.status.statusCode === '0') {
						that.hotQas = res.body.data.qas;
					}
				})
			},
			//根据标签查找问题
			inquiryQaByTag(item) {
				let that = this;
				this.$api.request.qaList({
					tagDTO:{
						tagName:item.tagName
					}
				}, function(res) {
					if (res.body.status.statusCode === '0') {
						that.qas = res.body.data.qas;
					}
				})
			},
		
			//选中标签
			selectTag(tag){
				this.tags.forEach(function(val,index){
					if(val.tagUuid == tag.tagUuid){
						val.type='primary';
					}else{
						val.type='default';
					}
				})
				this.inquiryQaByTag(tag)
			},
			//点击问题
			navDetail(qa){
				if(qa.previewUrl){
					uni.navigateTo({
						url:'/package_biz/pages/content/webView?src='+qa.previewUrl
					})
				}else{
					uni.navigateTo({
						url:'/package_biz/pages/content/richText?item='+encodeURIComponent(JSON.stringify(qa))
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		height: 100%;
		width: 100%;
	}
	.content {
		background-color: $page-color-base;
		height: 100%;
		position: relative;
	}

	.listcon{
		position:absolute;
		top:90upx;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}

	
	.hot-wrapper{
		background: #fff;
		margin:0 10upx;
	}
	.all-wrapper{
		background: #fff;
		.tag-view{
			padding:20upx 0;
			display: flex;
			flex-flow: row wrap;
			.tag-item{
				margin-left: 20upx;
				margin-top: 20upx;
			}
		}
	}
	.contact-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.swiper-box {
		height: 100%;
	}
	.panel-scroll-box {
		height: 100%;
	
		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
	
	.navbar {
		display: flex;
		height: 90upx;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: fixed; 
		width: 100%;
		z-index: 280;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>
